<template>
  <div class="item-detail flex column">
    <div class="item-title">距离组件</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80">
        <FormItem label="主标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_name_cn" placeholder="请输入主标题"></Input>
          </div>
        </FormItem>
        <FormItem label="副标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_info_summary" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
        <FormItem label="商品ID">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_goods" @click.native="tapInput(0)" placeholder="请选择商品"></Input>
          </div>
        </FormItem>
        <!-- <FormItem label="开启更多">
  	      <div class="flex center select-wrapper">
  	        <Select v-model="detailData.json.more.display" >
  	          <Option value="false">关闭</Option>
  	          <Option value="true">开启</Option>
  	        </Select>
  	      </div>
  	    </FormItem>
  	    <template v-if="detailData.json.more.display=='true' " >
  	    	<FormItem label="跳转类型">
  	          <div class="flex center">
  	            <Select v-model="detailData.json.skip_type" class="select-wrapper" @on-change="changeSelect">
  	              <Option value="good">商品</Option>
  	              <Option value="label">微页面</Option>
  	            </Select>
                <div class="input-wrapper">
                   <Input style="width: 200px;" readonly v-model="detailData.json.more.skip_url" @click.native="tapInput(1)" placeholder="请输入商品ID或微页面ID"></Input>
                </div>
  	           
  	          </div>
  	        </FormItem>
  	    </template> -->
	    
      </Form>
    </div>

     <goodsSelect buyMode="-9" @confirm="commitGoodsFn" :selectNum="selectNum" :goodsIdStr="goodsIdStr" ref="goodsModal"></goodsSelect>

    <!-- 微页面选择器 -->
     <micropage-select ref="micropageModal" @confirm="chosePages"></micropage-select>
   
  </div>
</template>
<script>

import { uploadImage } from 'api/uploadImage'

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'
// 微页面选择器组件
import MicropageSelect from 'base/micropage-select/micropage-select'

export default {
  name: 'GoodsListDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {
      // 跳转索引
      jumpIndex: 0,
      // 选择商品数
      selectNum: 0
	}
  },
  computed: {
    goodsIdStr: function () {
        if (this.selectNum == 0) {
          // 多选商品
            return this.detailData.label_goods;
        } else if (this.detailData.json.skip_type == "good") {
          // 跳转商品
            return this.detailData.json.more.skip_url;
        }
    }
  },
  methods: {

    tapInput(selectNum) {
    	this.selectNum = selectNum;
      if (selectNum == 0) {
        this.openGoodsSelectFn();
      } else {
        if (this.detailData.json.skip_type == "good") {
          this.openGoodsSelectFn();
        } else {
          // 打开微页面选择器
          this.$refs.micropageModal.show();
        }
      }
  		
    },

    // 跳转筛选
    changeSelect() {
      this.detailData.json.more.skip_url = "";
      this.detailData.json.more.path = "";
    },

    // 打开商品选择器
    openGoodsSelectFn(){
        this.$refs.goodsModal.show()
    },

    // 选中商品回调
    commitGoodsFn(_id){
    	if (this.selectNum == 0) {
    		// 多选商品
        	this.detailData.label_goods = _id;
    	} else {
    		// 跳转商品
          this.detailData.json.more.skip_url = _id;
          this.detailData.json.more.path = "app/mall/item/item?goodsId="+_id;
    	}

    },

     // 选中微页面回调
    chosePages(ids) {
        this.detailData.json.more.skip_url = ids[0];
        this.detailData.json.more.path = "app/mall/label/label?labelId="+ids[0];
    },
  
    
  },
  components: {
  	goodsSelect,MicropageSelect
  }
}

</script>

<style scoped>
@import url("../baseModule.less");

.select-wrapper {
  width: 90px;
}
.item-content {
	padding: 16px;
}

.content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
}
.img-wrapper {
	width: 82px;
    height: 82px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}
.content-item {
	padding: 16px 0;
    border-top: 1px solid #f2f2f2;

}
.form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/
.input-file-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}

select {
    height: 34px;
    width: 80px;
    margin-right: 8px;
    padding-left: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

</style>
